<template>
  <div>
    <input type="text" v-model="msg" />
    <p v-back>他对你说：{{ msg }}</p>
    <button @click="jump">跳转</button>
    <my-home></my-home>
  </div>
</template>
<script setup>
import { ref, onUnmounted } from "vue";
import { useRouter, onBeforeRouteLeave } from "vue-router";
// import MyHome from "../components/myHome.vue";
const { push } = useRouter();
const msg = ref("");
let i = 0;
let time = setInterval(() => {
  i++;
  console.log(i);
}, 1000);
// onUnmounted(() => {
//   clearInterval(time);
// });
onBeforeRouteLeave(() => {
  clearInterval(time);
});
const vBack = {
  // v和驼峰开头的，都认为是指令
  mounted(el) {
    el.style.color = "red";
  },
};

const jump = () => {
  push("/about");
};
</script>